<template>
  <div class="rightitemDiv">
    <mu-flexbox class="thrcEditDiv" :gutter="0" :style="{paddingLeft:pl+'px'}">
      <div class="thrcEditItem key flexNoneItem" :title="itemkey">{{itemkey}}</div>
      <mu-flexbox-item class="thrcEditItem" v-if="!isFloder" >
        <div @dblclick="valueClick">
        <mu-text-field class="editIpt" :type="itemValType" :disabled="!isEdit" v-model="myItemval" />
        </mu-text-field>
      </mu-flexbox-item>
    </mu-flexbox>
    <div v-for="(childVal,childKey) in itemval" v-if="isFloder">
      <rightitem :itemkey="childKey" :itemval="childVal" :pl="40"></rightitem>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rightitem',
  props:{
    itemkey:{
      type: [String, Number]
    },
    itemval:{
      type: [String,Number,Object]
    },
    pl:{
      type: [String, Number]
    }
  },
  data () {
    return {
      isEdit:false,
      myItemval : this.itemval
    }
  },
  methods:{
    valueClick () {
      this.isEdit = true;
    }
  },
  computed:{
    isFloder () {
      return typeof this.itemval === 'object';
    },
    itemValType () {
      if (typeof this.itemval == 'number') {
        return (typeof this.itemval);
      }
      else {
        return "text";
      }
    }
  },
  mounted () {
  
  },
  watch: {
    itemval(val) {
        this.myItemval = val;
    },
    myItemval(val) {
        this.$emit("rightValChange",[this.itemkey,val]);
    }
  }
}
</script>

<style scoped lang="less">
.thrcEditDiv{
  width:100%;
  height:28px;
  margin:0 0 0 20px;
  .thrcEditItem{
    height:28px;
    line-height: 28px;
    color:#000;
    &.key{
      width:70px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
  }
}
.mu-flex-row{
  margin:0;
  padding:0 0 0 17px;
}

</style>